<template>
  <div class="box">
    <div class="class_mid">
    <van-nav-bar
      title="购买记录"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      style="width:100%"
    />
    </div>
    <div class="two">
      <van-list
        v-model="newloading"
        :finished="newfinished"
        finished-text="没有更多了"
        :offset="0"
        @load="newonLoad">
        <div slot="default">
          <div class="list" v-for="(item,index) of exemList" :key="index">
            <div class="listtitle"><span style="color:black">明细：</span> {{item.buyinfo}}</div>
            <div class="listtime"> <span style="color:black">时间：</span> {{ item.createtime | dateFormat }}</div>
            <div class="ordernumber">
              <div><span style="color:black">订单号：</span> {{item.ordercode}}</div>
              <div class="recordprice"> <span style="color:black">价格：</span>  {{item.price}}</div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { userrecord } from '@/api/question.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      exemList: [],
      newloading: false,
      newfinished: false,
      page: 1,
      alltestlist: []
    }
  },

  created () {

  },
  computed: {
    ...mapState(['id'])
  },
  methods: {
    async newonLoad () {
      const data = await userrecord({
        userid: this.id,
        page: this.page
      })
      this.alltestlist.push(...data.data.useroredercoderesult.data)
      this.exemList = [...new Set(this.alltestlist)]
      console.log(this.exemList)
      // for (var i = 0; i < this.exemList.length; i++) {
      //   this.exemList[i].buyinfo = this.exemList[i].buyinfo.slice(3, this.exemList[i].buyinfo.length - 1)
      //   console.log(this.exemList[i].buyinfo)
      // }
      this.newloading = false
      if (this.page < data.data.useroredercoderesult.last_page) {
        this.page++
      }
      if (this.exemList.length >= data.data.useroredercoderesult.total) {
        this.newfinished = true
      }
    }
  }
}
</script>

<style scoped lang='less'>
.gong {
  text-align: center;
  .gong_tu img {
    width: 150px;
    height: 150px;
  }
  .gong_zi span {
    font-size: 14px;
  }
}
.da {
  margin-right: 3.5%;
  margin-left: 3.5%;
  box-shadow: 0px 0px 10px #ccc;
  margin-bottom: 20px;
}
.box {
  padding: 20px;
}
.van-grid-item__content--center {
  margin: 20px;
}
.van-grid-item__content {
  position: relative;
  padding: 10px;
  padding-bottom: 50px;
}
.zong{
  margin-top:20px;
  display: flex;
  padding-top: 10px;
}
.list {
  margin-right: 20px;
  margin-bottom: 20px;
  padding-top:3%;
  padding-bottom: 3%;
  padding-left: 5%;
  padding-right: 5%;
  box-shadow: 0px 0px 10px #ccc;
  font-size: 26px;
  color: #969799
}
.ordernumber {
  display: flex;
  justify-content: space-between;
}
.listtitle{
  margin-bottom:2% ;
}
.listtime{
  margin-bottom:2% ;
}

</style>
